<template>
  <div class="leave-container">
    <!-- 查询区域 -->
    <el-card class="search-box">
      <el-form :inline="true">
        <el-form-item label="申请时间">
          <el-date-picker
              v-model="queryForm.dateRange"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
          />
        </el-form-item>

        <el-form-item label="审批状态">
          <el-select
              v-model="queryForm.status"
              placeholder="全部状态"
              clearable
          >
            <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
              type="primary"
              @click="handleSearch"
              :loading="loading"
          >查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-button
            type="danger"
            @click="printEmptyAnnualLeaveCSV"
        >打印</el-button>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="data-table">
      <el-table
          :data="processedData"
          v-loading="loading"
          border
          stripe
          style="width: 100%"
      >
        <!-- 申请ID -->
        <el-table-column
            prop="registrationId"
            label="申请ID"
            width="120"
            align="center"
        />

        <!-- 申请人 -->
        <el-table-column label="申请人" width="150" align="center">
          <template #default="{row}">
            <el-tag v-if="row.employeeId === 0" type="info">系统</el-tag>
            <span v-else>
              {{ employeeMap.get(row.employeeId) || '加载中...' }}
            </span>
          </template>
        </el-table-column>

        <!-- 处理人 -->
        <el-table-column label="处理人" width="150" align="center">
          <template #default="{row}">
            <el-tag v-if="row.operator === 0" type="info">系统管理员</el-tag>
            <span v-else>
              {{ operatorMap.get(row.operator) || '加载中...' }}
            </span>
          </template>
        </el-table-column>

        <!-- 申请时间 -->
        <el-table-column label="申请时间" width="180" align="center">
          <template #default="{row}">
            {{ formatDate(row.dataApplyLeave) }}
          </template>
        </el-table-column>

        <!-- 休假时间 -->
        <el-table-column label="休假时间" width="180" align="center">
          <template #default="{row}">
            {{ formatDate(row.startDataLeave) }}
          </template>
        </el-table-column>
        <!-- 备注 -->
        <el-table-column
            prop="remark"
            label="备注"
            width="200"
            align="center"
            show-overflow-tooltip
        >
          <template #default="{row}">
      <span class="remark-text">
        {{ row.remark || '无' }}
      </span>
          </template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column label="状态" width="120" align="center">
          <template #default="{row}">
            <el-tag :type="statusTagMap[row.status]">
              {{ statusTextMap[row.status] }}
            </el-tag>
          </template>
        </el-table-column>


        <!-- 操作列（管理员可见） -->
        <el-table-column
            v-if="isAdmin"
            label="操作"
            width="180"
            align="center"
        >
          <template #default="{row}">
            <div v-if="row.status === 0">
              <el-button
                  type="text"
                  size="small"
                  @click="handleProcess(row.registrationId, 1)"
              >批准</el-button>
              <el-button
                  type="text"
                  size="small"
                  style="color: #F56C6C"
                  @click="handleProcess(row.registrationId, 2)"
              >拒绝</el-button>
            </div>
            <span v-else class="gray-text">已处理</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 空状态提示 -->
      <el-empty
          v-if="!loading && processedData.length === 0"
          description="暂无相关数据"
          class="empty-tip"
      />
    </el-card>
  </div>
</template>

<script src="../../script/Annualleave/AnnualleaveRecord.js"></script>

<style scoped>
.gray-text {
  color: #909399;
  font-size: 12px;
}

.el-table {
  margin-top: 15px;
}

.el-tag {
  margin: 2px;
  font-size: 12px;
}

.empty-tip {
  padding: 50px 0;
}
</style>